// 添加输入框组件，编写两种样式
<template>
  <div class="footerInput">
    <!-- 未激活状态的 “小输入框” -->
    <div class="deactive" v-if="!isShowTextarea">
      <input
        type="text"
        placeholder="写跟贴"
        @focus="showTextarea"
        v-model="content"
      />

      <div class="comment">
        <span class="iconfont iconpinglun-"></span>
        <div class="num">102</div>
      </div>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 已激活状态的 "大输入框" -->
    <div class="active" v-if="isShowTextarea">
      <div class="sendcomment">
        <!-- <textarea
          v-model="content"
          ref="textbox"
          rows="3"
          @blur="hideTextarea"
          :placeholder="'@' + nickname"
        > -->
        <textarea
          v-model="content"
          ref="textbox"
          rows="3"
          @blur="hideTextarea"
          :placeholder="`@${nickname ? nickname : '作者'}`"
        >
        <!-- <textarea
          v-model="content"
          ref="textbox"
          rows="3"
          @blur="hideTextarea"
          :placeholder="'@' + nickname ? 'this.nickname' : '作者'"
        > -->
        <!-- <textarea
          v-if="hideTextarea"
          v-model="content"
          ref="textbox"
          rows="3"
          @blur="hideTextarea"
          :placeholder="'@作者'"
        >
        <textarea
        v-else
          v-model="content"
          ref="textbox"
          rows="3"
          @blur="hideTextarea"
          :placeholder="'@' + nickname"
        > -->
        <!-- 
        在这里怎么写@那个需要回复的用户名（昵称）呢？？？
        问题2：如何在一进入页面：还没有所谓的失去焦点的时候，就把placehlder的值改为@作者呢？？
         -->
        </textarea>
        <div class="sendbtn" @click="sendComment">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
  data() {
    return {
      content: "",
      isShowTextarea: false,
      parentId: "",
      nickname: "",
    };
  },
  // created() {
  //   this.loadComment();
  // },
  mounted() {
    // 页面挂载完毕，利用事件总线，eventBus 监听评论回复请求
    eventBus.$on("sendMsg", (parentId, nickname) => {
      // 把窗口弹出来：
      this.showTextarea();
      this.parentId = parentId;
      this.nickname = nickname;
      console.log("昵称？？？", nickname);
      console.log(parentId);
    });
  },
  destroyed() {
    // 因为这是单页应用，所以用了事件总线的监听，记得在销毁组件的时候，清除这个监听
    eventBus.$off("sendMsg");
  },
  methods: {
    // loadComment() {
    //   this.$axios({
    //     data: {
    //       parent_id: this.parentId,
    //       content: this.content,
    //     },
    //     method: "post",
    //     headers: {
    //       Authorization: localStorage.getItem("token"),
    //     },
    //     url: "/post_comment/" + this.$route.params.id,
    //   }).then((res) => {
    //     console.log(res.data, 123);
    //     this.content = "";
    //   });
    // },
    showTextarea() {
      // 聚焦时，大输入框就出现
      this.isShowTextarea = true;
      // 显示以后需要自动聚焦文本框,需要使用延时器：
      // 或者使用vue自带的 方法：
      // setTimeout(() => {
      //   this.$refs.textbox.focus();
      // }, 100);
      this.$nextTick(() => {
        this.$refs.textbox.focus();
        // this.nickname = "作者";
      });
    },
    hideTextarea() {
      setTimeout(() => {
        this.isShowTextarea = false;
        this.parentId = "";
        // 失去焦点的时候把placeholder改为回复作者！
        this.nickname = "作者"; //这个不能省略哦！！
      }, 100);
    },
    sendComment() {
      this.$axios({
        data: {
          // parent_id: "",  //这里好重要的！！！这样设置！！我就不能回复父评论啦~~！！！！记住哟！！
          parent_id: this.parentId,
          content: this.content,
        },
        method: "post",
        // headers: {
        //   Authorization: localStorage.getItem("token"),
        // },
        url: "/post_comment/" + this.$route.params.id,
      }).then((res) => {
        console.log(res.data);
        this.content = "";
        // 不是通知自己更新评论的数据！！而是要通知这个输入框的父亲！！更新数据！！也就是文章详情页！
        this.$emit("reloadComment");
      });
      // this.loadComment(); ！！ 错误！！ 不是通知自己更新评论的数据！！而是要通知这个输入框的父亲！！更新数据！！也就是文章详情页！
    },
  },
};
</script>

<style lang="less" scoped>
.footerInput {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f2f2f2;
  .deactive {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50 / 360 * 100vw;
    input {
      padding: 0 15 / 360 * 100vw;
      box-sizing: border-box;
      // padding: 10 / 360 * 100vw;
      height: 30 / 360 * 100vw;
      width: 180 / 360 * 100vw;
      border-radius: 15 / 360 * 100vw;
      border: none;
      outline: none;
      background-color: #d7d7d7;
      font-size: 14 / 360 * 100vw;
      //   &::-webkit-input-placeholder  设置输入框的颜色
      &::-webkit-input-placeholder {
        color: #333;
      }
    }
    .iconfont {
      font-size: 24 / 360 * 100vw;
      color: #888;
      font-weight: 700;
    }
    .comment {
      position: relative;
      top: 4 / 360 * 100vw;
      .num {
        position: absolute;
        top: -5px;
        left: 4px;
        height: 14 / 360 * 100vw;
        line-height: 14 / 360 * 100vw;
        padding: 0 5 / 360 * 100vw;
        border-radius: 12 / 360 * 100vw;
        background-color: red;
        color: #fff;
        font-size: 12 / 360 * 100vw;
      }
    }
  }
  .active {
    .sendcomment {
      display: flex;
      justify-content: space-evenly;
      //  align-items: flex-end;  低端对齐
      align-items: flex-end;
      textarea {
        box-sizing: border-box;
        padding: 20 / 360 * 100vw;
        border-radius: 10 / 360 * 100vw;
        height: 90 / 360 * 100vw;
        width: 260 / 360 * 100vw;
        background-color: #d7d7d7;
        border: none;
        outline: none;
        resize: none;
        text-indent: 20px;
      }
      .sendbtn {
        padding: 0 14 / 360 * 100vw;
        height: 26 / 360 * 100vw;
        line-height: 26 / 360 * 100vw;
        font-size: 14 / 360 * 100vw;
        border-radius: 12 / 360 * 100vw;
        color: #fff;
        background-color: red;
      }
    }
  }
}
</style>